/**
 * @type {import('vuex').Module}
 */

import axios from 'axios'

const todo = {
  namespaced: true,
  state: {
    list: []
  },
  mutations: {
    updatelist (state, val) {
      state.list = val
    },
    delList (state, id) {
      state.list = state.list.filter(item => item.id !== id)
    },
    updateIsdone (state, obj) {
      const currentItem = state.list.find(item => item.id === obj.id)
      currentItem.isDone = !currentItem.isDone
    },
    clearItemAll (state) {
      state.list = state.list.filter(item => !item.isDone)
    },
    // checkItem (state) {
    //   return state.list.every(item => item.isDone)
    // },
    changeAllisDone (state, flag) {
      // eslint-disable-next-line no-return-assign
      state.list.forEach(item => item.isDone = flag)
    }
  },
  actions: {
    async getList (context) {
      const res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/todo'
      })
      // console.log(res)
      context.commit('updatelist', res.data)
    },
    async delItem (context, id) {
      console.log(id)
      await axios({
        method: 'DELETE',
        url: 'http://localhost:3000/todo/' + id
      })
      context.commit('delList', id)
    },
    async addItem (context, title) {
      await axios({
        method: 'POST',
        url: 'http://localhost:3000/todo',
        data: {
          isDone: false,
          title
        }
      })
      const res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/todo'
      })
      // console.log(res)
      context.commit('updatelist', res.data)
    },
    async activeList (context) {
      const res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/todo'
      })
      // console.log(res)
      const aList = res.data.filter(item => !item.isDone)
      context.commit('updatelist', aList)
    },
    async completedList (context) {
      const res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/todo'
      })
      // console.log(res)
      const cList = res.data.filter(item => item.isDone)
      console.log(cList)
      context.commit('updatelist', cList)
    },
    async changeItem (context, obj) {
      await axios({
        method: 'PATCH',
        url: 'http://localhost:3000/todo/' + obj.id,
        data: {
          isDone: !obj.isDone
        }
      })
      context.commit('updateIsdone', obj)
    },
    clearDone (context) {
      context.state.list.forEach(async (item) => {
        if (item.isDone) {
          await axios({
            method: 'DELETE',
            url: 'http://localhost:3000/todo/' + item.id
          })
        }
      })
      context.commit('clearItemAll')
    },
    changeAll (context, flag) {
      context.state.list.forEach(async (item) => {
        await axios({
          method: 'PATCH',
          url: 'http://localhost:3000/todo/' + item.id,
          data: {
            isDone: flag
          }
        })
      })
      context.commit('changeAllisDone', flag)
    }
  },
  getters: {
    itemCount (state) {
      const arr = state.list.filter(item => !item.isDone)
      return arr.length
    },
    isFooterShow (state) {
      return state.list.length
    },
    isClearShow (state) {
      return state.list.some(item => item.isDone === true)
    }
  }
}

export default todo
